<!--
 * @Description: 
 * @Author: zhanyinjia
 * @Date: 2024-09-02 14:59:41
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2024-09-02 16:52:04
-->
<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import { Graph, treeToGraphData } from '@antv/g6';
import { data } from './data.js'

onMounted(() => {
  const graph = new Graph({
    container: document.getElementById('container'),
    width: 500,
    height: 500,
    data: treeToGraphData(data)
    /* data: {
      nodes: [
        {
          id: 'node-1',
          style: { x: 50, y: 100 },
        },
        {
          id: 'node-2',
          style: { x: 150, y: 100 },
        },
      ],
      edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
    }, */
  });

  graph.render();
});
</script>

<style scoped>
#container {
  border: 1px solid #333;
  margin: 100px;
  width: 800px;
  height: 500px;
}
</style>